<template>
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
    :open-delay="openDelay"
  >
    <div slot="content" class="toolTip_content">{{ text }}</div>
    <span
      @mouseenter="visibilityChange($event)"
      class="tooltip-wrap"
      :style="{ width: textWidth }"
    >{{ text }}</span>
  </el-tooltip>
</template>

<script>
export default {
  name: "EllipsisTooltip",
  props: {
    text: { type: String, default: "" }, // 字符内容
    placement: { type: String, default: "top" },
    openDelay: { type: Number, default: 200 }, // class,
    textWidth: {
      default: "100%",
      type: String,
    },
  },
  data() {
    return {
      tooltipFlag: false,
    };
  },
  methods: {
    visibilityChange(event) {
      if (event.target.scrollWidth > event.target.clientWidth) {
        this.tooltipFlag = true;
      } else {
        this.tooltipFlag = false;
      }
    },
  },
};
</script>
<style scoped>
.tooltip-wrap {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>